<template>
  <div style="height: 240px">
    <ChartView ref="chartViewRef"></ChartView>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const chartViewRef = ref()

const option = {
  /**
   * tooltip配置
   */
  tooltip: {
    /**
     * tooltip背景色
     */
    backgroundColor: 'red',
    /**
     * tooptip边框颜色
     */
    borderColor: 'green',
    /**
     * tooltip边框宽度
     */
    borderWidth: 5,
    /**
     * tooltip内边距
     */
    padding: 0,
    /**
     * tooltip额外自定义样式（这里设置的是阴影）
     */
    extraCssText: 'box-shadow: 0 0 10px red;',
    /**
     * 自定义tooltip内容
     */
    formatter(params) {
      // console.log('params', params)
      console.log('params', params, option)
      return `<div class="pzyTest">
            <div>对局信息</div>
            <div><div class="pointerBlue"></div>总局数:${option.series[0].data[params.dataIndex]}</div>
            <div><div class="pointerGreen"></div>胜利局数:${option.series[1].data[params.dataIndex]}</div>
      </div>`
    },
  },
  /**
   * 图例配置
   *
   * 要显示图例，series中的每个对象都必须配置name属性, 默认的图例文案就是name值
   */
  legend: {},
  /**
   * x坐标轴配置
   */
  xAxis: {
    /**
     * 坐标轴类型
     * 'value' 数值轴，适用于连续数据。
     * 'category' 类目轴，适用于离散的类目数据。
     * 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
     * 'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
     */
    type: 'category',
    /**
     * x轴数据
     */
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  /**
   * y坐标轴配置
   */
  yAxis: {
    type: 'value',
    min: 1,
    /**
     * 坐标轴名称
     */
    name: '局数',
    /**
     * 增加坐标轴名称与轴线之间的距离
     */
    nameGap: 30,
    axisLine: {
      show: true,
      symbol: ['none', 'arrow'],
      /**
       * 设置箭头偏移量，否则箭头与柱子完全贴合在一起
       */
      symbolOffset: 25,
      lineStyle: {
        color: 'black', //设置y轴的颜色
        shadowOffsetY: -25, //利用阴影进行反向延长
        shadowColor: 'black', //设置阴影的颜色
      },
    },
  },
  /**
   * 图表配置
   */
  series: [
    {
      name: '总局数',
      /**
       * 图表类型
       */
      type: 'bar',
      /**
       * 图表数据
       */
      data: [160, 120, 100, 80, 70, 100, 65],
      label: {
        show: true,
        position: 'top',
      },
      emphasis: {
        disabled: true,
      },
    },
    {
      name: '胜利局数',
      /**
       * 图表类型
       */
      type: 'bar',
      /**
       * 图表数据
       */
      data: [60, 80, 50, 0, 70, 100, 60],
      /**
       * 设置不同系列之间柱子的间距. -100% 会使两个系列的柱子的位置完全重合
       */
      barGap: '-100%',
      label: {
        show: true,
      },
      emphasis: {
        disabled: true,
      },
    },
  ],
}

onMounted(() => {
  chartViewRef.value.setOption(option)
})
</script>
<style>
.pzyTest {
  background: orange;
}
.pointerGreen {
  width: 10px;
  height: 10px;
  background: green;
  display: inline-block;
  margin-left: 2px;
  margin-right: 2px;
}
.pointerBlue {
  width: 10px;
  height: 10px;
  background: blue;
  display: inline-block;
  margin-left: 2px;
  margin-right: 2px;
}
</style>
